<template>
  <el-button type="primary" @click="handleExport">导出excel</el-button>
  <el-table :data="tableData" height="85vh" style="width: 100%">
    <el-table-column fixed label="商品ID">
      <template #default="scope">
        {{ scope.row.objectId }}
      </template>
    </el-table-column>
    <el-table-column label="商品名称">
      <template #default="scope">
        {{ scope.row.proname }}
      </template>
    </el-table-column>
    <el-table-column label="商品图片">
      <template #default="scope">
        <img :src="scope.row.img1" alt="" srcset="" style="height: 50px" />
      </template>
    </el-table-column>
    <el-table-column label="分类" :filter-method="filterHandler" :filters="[
      { text: '手机', value: '手机' },
      { text: '家电', value: '家电' },
      { text: '汽车', value: '汽车' },
      { text: '图书', value: '图书' },
    ]">
      <template #default="scope">
        {{ scope.row.category }}
      </template>
    </el-table-column>
    <el-table-column sortable prop="originprice" label="价格">
      <template #default="scope">
        {{ scope.row.originprice }}
      </template>
    </el-table-column>
    <el-table-column sortable prop="discount" label="折扣">
      <template #default="scope">
        {{ scope.row.discount }}
      </template>
    </el-table-column>
    <el-table-column sortable prop="sales" label="销量">
      <template #default="scope">
        {{ scope.row.sales }}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { bannerDel } from '../../api/product'
import { ElMessageBox } from "element-plus";
import request from '../../untils/request'
import { excelExport2 } from '../../untils/excel-sdk'

export default {
  data() {
    return {
      tableData: []
    }
  },
  created() {
    request.get('/classes/VueProduct').then(res => {
      this.tableData = res.data.results;
      console.log(this.tableData)
      console.log(res.data)
    })
  },
  methods: {
    handleDelete(index, row) {
      ElMessageBox.confirm("删除后数据无法找回", "确定要删除吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        bannerDel(row.objectId).then((res) => {
          this.tableData.splice(index, 1)
        })
      })
    },
    filterHandler(value, row, column) {
      console.log(value)
      return row.category == value;
    },
    handleExport() {
      excelExport2(
        this.tableData,
        {
          proname: "名称",
          img1: "图片链接",
          category: "分类",
          originprice: '价格',
          discount: '折扣',
          sales: '销量'
        },
        "商品数据表格"
      );
    },
  },

}


</script>
